<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
	<head>
		<title>商品维护</title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
		<style>
			.table td{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
	<%--导航栏--%>
	<%@include file="../resources/nav.jsp"%>
		<div class="container-fluid" style="margin-top: 100px;">
			<!-- 小插件 天气和播放器-->
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-5 text-left">
					<div class="card">
						<div class="card-header bg-light text-center">天气预报</div>
						<div class="card-body text-center">
							<iframe allowtransparency="true" frameborder="0" width="565" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=0&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=565&h=98&align=center"></iframe>
						</div>
					</div>
				</div>
				<div class="col-md-5 text-right">
					<div class="card">
					<div class="card-header bg-light text-center">音乐放松一下</div>
					<div class="card-body text-center">
						<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=33715893&auto=0&height=66"></iframe>
					</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 平台指标 -->
			<!-- 用户人数  商品数  总销售量 总销售额  -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-2">
					<div class="card">
						<div   class="card-body text-center">
							<h1 id="userNum"></h1>
						</div>
						<div class="card-footer bg-light text-center">注册会员数</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div  class="card-body text-center">
							<h1 id="productNum"></h1>
						</div>
						<div class="card-footer bg-light text-center">平台商品数</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div  class="card-body text-center">
							<h1 id="saleNum">89767</h1>
						</div>
						<div class="card-footer bg-light text-center">商品销售总量</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="saleMoney"></h1>
						</div>
						<div class="card-footer bg-light text-center">平台销售总额(W)</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 看板 -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="row">
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									商品访问占比分析
								</div>
								<div class="card-body">
									<div class="ibox float-e-margins">
										<div class="ibox-title">
											<h5><span style="font-size: 16px;" class="label label-success">商品访问量占比</span></h5>
										</div>
										<div class="ibox-content">
											<div class="echarts" id="userPie" style="height: 300px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									热卖商品分析
								</div>
								<div class="card-body">
									<div class="ibox-title">
										<h5><span style="font-size: 16px;" class="label label-success">热点商品Top5</span></h5>
									</div>
									<div class="ibox-content">
										<div class="echarts" id="coursesBar" style="height: 300px;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			
			<!-- 看板 -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="row">
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									热卖商品实时排行榜
								</div>
								<div class="card-body">
									<table id="table" class="table table-condensed table-hover table-sm ">
										<thead>
											<tr>
												<th>排名</th>
												<th>商品</th>
												<th>价格</th>
												<th>销售量</th>
												<th>详情</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td ></td>
												<td ></td>
												<td ></td>
												<td ></td>
												<td><a id="a1" class="btn btn-outline-success btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
<%--												<td><a class="btn btn-outline-success btn-sm" href="Info.jsp"><i class="fa fa-info"></i>查看</a></td>--%>
<%--												<a class="btn btn-sm btn-outline-info" href="/Mall/product/info?id=${p1}"><i class="fa fa-info"></i>查看</a>--%>
											</tr>
											<tr>
												<td ></td>
												<td ></td>
												<td ></td>
												<td ></td>
												<td><a id="a2" class="btn btn-outline-success btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td><a id="a3" class="btn btn-outline-success btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">待补货商品</div>
								<div class="card-body">
									<table id="table2" class="table table-condensed table-hover table-sm">
										<thead>
											<tr>
												<th>排名</th>
												<th>商品</th>
												<th>价格</th>
												<th>库存</th>
												<th>详情</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td><a id="a4" class="btn btn-outline-warning btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td><a id="a5" class="btn btn-outline-warning btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td><a id="a6" class="btn btn-outline-warning btn-sm" href="/Mall/product/info?id="><i class="fa fa-info"></i>查看</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/echarts.min.js"></script><br />
	<script>
		//小方块数据
		var userNum=0;
		var productNum=0;
		var saleNum=0;
		var saleMoney=0;
	//饼图数据
		var num1=0;
		var num2=0;
		var num3=0;
		var num4=0;
	// top5数据
	var productName=[];
	var productVisitNum=[];
	var productStorageNum=[];
	// 热卖商品
	var hotSaleList=[];
	//待补货商品
	var storageList=[];
		//发送ajax请求
	myajax=$.ajax({
			type: "POST",
			url: "http://localhost:8080/Mall/data/view",
			contentType: "application/json",
			success: function(data) {
				num1=data.num1;num2=data.num2;num3=data.num3;num4=data.num4;
				userNum=data.userNum;productNum=data.productNum;
				saleNum=data.saleNum;saleMoney=data.saleMoney;
				hotSaleList=data.visitList;
				storageList=data.storageList;
				for(var i=0;i<data.visitList.length;i++){
					productName[i]=data.visitList[i].name;
					productStorageNum[i]=data.visitList[i].sum;
					productVisitNum[i]=data.visitList[i].visitCount;
				}
				console.log(data)
				console.log(hotSaleList)
				},
			error: function() {
				alert("获取数据失败，请检查");
			}
		});
	$.when(myajax).done(function () {
		setTableValue()
		setTableValue2()
		setTableValue3()
		/*支付平台占比饼状图*/
		$(function() {
			var pieChart = echarts.init(document.getElementById("userPie"));
			var pieoption = {
				title: {
					text: '',
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: ['100以下', '100~1000', '1000~5000', '5000以上']
				},
				calculable: true,
				series: [{
					name: '支付平台',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [{
						value: num1,
						name: '100以下'
					}, {
						value: num2,
						name: '100~1000'
					}, {
						value: num3,
						name: '1000~5000'
					}, {
						value: num4,
						name: '5000以上'
					}]
				}]
			};
			pieChart.setOption(pieoption);

			/*初始化热销课程排行榜*/
			var barChart = echarts.init(document.getElementById("coursesBar"));
			var baroption = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['访问量', '库存']
				},
				grid: {
					left:50,
					x: 30,
					x2: 40,
					y2: 24
				},
				calculable: true,
				xAxis: [{
					axisLabel: {
						interval:0,
						rotate:0
					},
					data: productName
				}],

				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '访问量',
					type: 'bar',
					data: productVisitNum,
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					}
				}, {
					name: '库存',
					type: 'bar',
					data: productStorageNum,
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					}
				}]
			};
			barChart.setOption(baroption);


			//初始化折线图
			initWeekLine(3);
		})
		/*
		线上课程营收曲线
		 * */
		function initWeekLine(swt){
			switch(swt){
					//月度
				case 1:
					var lineChart1 = echarts.init(document.getElementById("echarts-line-chart"));
					var lineoption1 = {
						title : {
							x:'center',
							text: '平台月度营收'
						},
						tooltip : {
							trigger: 'axis'
						},
						grid:{
							left:100
						},
						calculable : true,
						xAxis : [
							{
								type : 'category',
								boundaryGap : false,
								data : ['周一','周二','周三','周四','周五','周六','周日']
							}
						],
						yAxis : [
							{
								type : 'value',
								axisLabel : {
									formatter: '{value} 人民币'
								}
							}
						],
						series : [
							{
								name:'最高气温',
								type:'line',
								data:[11, 11, 15, 13, 12, 13, 10],
								markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									]
								},
								markLine : {
									data : [
										{type : 'average', name: '平均值'}
									]
								}
							}
						]
					};
					lineChart1.setOption(lineoption1);
					break;
					//年度
				case 2:
					var lineChart2 = echarts.init(document.getElementById("echarts-line-chart"));
					var lineoption2 = {
						title : {
							text: '平台年度营收',
							x:'center'
						},
						tooltip : {
							trigger: 'axis'
						},
						grid:{
							left:100
						},
						calculable : true,
						xAxis : [
							{
								type : 'category',
								boundaryGap : false,
								data : ['周一','周二','周三','周四','周五','周六','周日']
							}
						],
						yAxis : [
							{
								type : 'value',
								axisLabel : {
									formatter: '{value} °C'
								}
							}
						],
						series : [
							{
								name:'最高气温',
								type:'line',
								data:[11, 11, 15, 13, 12, 13, 10],
								markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									]
								},
								markLine : {
									data : [
										{type : 'average', name: '平均值'}
									]
								}
							}
						]
					};
					lineChart2.setOption(lineoption2);
					break;
				case 3:
					var lineChart3 = echarts.init(document.getElementById("echarts-line-chart"));
					var lineoption3 = {
						title : {
							text: '平台周度营收',
							x:'center'
						},
						tooltip : {
							trigger: 'axis'
						},
						grid:{
							left:100
						},
						calculable : true,
						xAxis : [
							{
								type : 'category',
								boundaryGap : false,
								data : ['周一','周二','周三','周四','周五','周六','周日']
							}
						],
						yAxis : [
							{
								type : 'value',
								axisLabel : {
									formatter: '{value} ￥'
								}
							}
						],
						series : [
							{
								name:'最高气温',
								type:'line',
								data:[11000, 22200, 8000, 30000, 15000, 10000, 40000],
								markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									]
								},
								markLine : {
									data : [
										{type : 'average', name: '平均值'}
									]
								}
							}
						]
					};
					lineChart3.setOption(lineoption3);
			}
		}

	});

	function setTableValue(){
		var tr = $("#table tr");//获取table中的tr
		var len = tr.length;//获取tr长度
		document.getElementById('a1').href+=hotSaleList[0].idProduct
		document.getElementById('a2').href+=hotSaleList[1].idProduct
		document.getElementById('a3').href+=hotSaleList[2].idProduct
		for (var i=1; i<len; i++){//遍历并赋值
			console.log(i)
			if(i>hotSaleList.length){//判断如果tableData中没有值，就跳出循环
				break;
			}
			var th = $(tr[i]).find("th");//获取table中的th
			var td = $(tr[i]).find("td");//获取table中的td
			$(td[0]).html(i);//给th赋值
			console.log(hotSaleList[i-1].name)
			$(td[1]).html(hotSaleList[i-1].name);//给td赋值
			$(td[2]).html(hotSaleList[i-1].price);//给td赋值
			console.log(hotSaleList[i-1].price)
			$(td[3]).html(hotSaleList[i-1].saleCount);//给td赋值
		}
	}
	function setTableValue2(){
		var tr = $("#table2 tr");//获取table中的tr
		var len = tr.length;//获取tr长度
		document.getElementById('a4').href+=storageList[0].idProduct
		document.getElementById('a5').href+=storageList[1].idProduct
		document.getElementById('a6').href+=storageList[2].idProduct
		for (var i=1; i<len; i++){//遍历并赋值
			console.log(i)
			if(i>storageList.length){//判断如果tableData中没有值，就跳出循环
				break;
			}
			var th = $(tr[i]).find("th");//获取table中的th
			var td = $(tr[i]).find("td");//获取table中的td
			$(td[0]).html(i);//给th赋值
			console.log(storageList[i-1].name)
			$(td[1]).html(storageList[i-1].name);//给td赋值
			$(td[2]).html(storageList[i-1].price);//给td赋值
			console.log(storageList[i-1].price)
			$(td[3]).html(storageList[i-1].sum);//给td赋值
		}
	}
		function setTableValue3(){
			var h1 = $("#userNum");//获取table中的tr
			var h2 = $("#productNum");//获取table中的tr
			var h3 = $("#saleNum");//获取table中的tr
			var h4 = $("#saleMoney");//获取table中的tr
			$(h1).html(userNum)
			$(h2).html(productNum)
			$(h3).html(saleNum)
			$(h4).html(saleMoney)

		}
	</script>
</html>
